<template>
  <div class>
    <div style="margin: 20px;"></div>
    <el-form
      :label-position="labelPosition"
      label-width="95px"
      :rules="rules"
      ref="owner"
      class="demo-ruleForm"
      :model="owner"
    >
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="业主ID" prop="ownerId">
              <el-input v-model="owner.ownerId" readonly disabled></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="业主姓名" prop="ownerName">
              <el-input v-model="owner.ownerName"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="联系方式" prop="ownerPhone">
              <el-input v-model="owner.ownerPhone"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="密码" prop="ownerPw">
              <el-input v-model="owner.ownerPw" readonly disabled></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <!-- 第二行 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="区域">
              <el-input v-model="owner.ownerArea" readonly disabled></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="栋" prop="ownerDong">
              <el-input v-model="owner.ownerDong" readonly disabled></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="单元" prop="ownerUnit">
              <el-input v-model="owner.ownerUnit" readonly disabled></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="室" prop="ownerRoom">
              <el-input v-model="owner.ownerRoom" readonly disabled></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <!-- 第三行 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="住房面积">
              <el-input v-model="owner.ownerHome" readonly disabled></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="物业费单号">
              <el-input v-model="owner.propFId" readonly disabled></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="水费单号">
              <el-input v-model="owner.waterFId" readonly disabled></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="电费单号">
              <el-input v-model="owner.eleFId" readonly disabled></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <!-- 第四行 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="燃气费单号">
              <el-input v-model="owner.gasFId" readonly disabled></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="dd">
            <el-button style="position: relative;right: -10px;" type="text" @click="toaddparking(owner.manageCarId)">车辆管理单</el-button>
            <el-input class="aa" v-model="owner.manageCarId" disabled></el-input>
          </div>
        </el-col>
      </el-row>

      <el-form-item class="limitdiv">
        <el-button type="primary" @click="submitForm('owner')">确认修改</el-button>
        <el-button type="primary" @click="turnback" plain>返 回</el-button>
        <!-- <el-button @click="resetForm('owner')">重置</el-button> -->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      labelPosition: "right",
      owner: {
        ownerId: "ownerId",
        ownerName: "ownerName",
        ownerPhone: "13195562622",
        ownerPw: "ownerPw",
        ownerHome: "ownerHome",
        ownerArea: "ownerArea",
        ownerDong: "ownerDong",
        ownerUnit: "ownerUnit",
        ownerRoom: "ownerRoom",
        manageCarId: "manageCarId",
        waterFId: "waterFId",
        eleFId: "eleFId",
        gasFId: "gasFId",
        propFId: "propFId"
      },
      rules: {
        ownerId: [
          { required: true, message: "请输入初始密码", trigger: "blur" }
        ],
        ownerName: [
          { required: true, message: "请输入访客姓名", trigger: "blur" }
        ],
        ownerPhone: [
          { required: true, message: "请输入访客联系方式", trigger: "blur" },
          {
            pattern:
              "^((13[0-9])|(15[^4])|(18[0,2,3,5-9])|(17[0-8])|(147))\\d{8}$",
            message: "仅支持中国大陆手机号"
          }
        ],
        ownerPw: [
          { required: true, message: "请输入初始密码", trigger: "blur" }
        ],
        ownerHome: [
          { required: true, message: "请输入住房面积", trigger: "blur" }
        ],
        ownerArea: [],
        ownerDong: [
          { required: true, message: "请输入楼栋号", trigger: "blur" }
        ],
        ownerUnit: [
          { required: true, message: "请输入单元号", trigger: "blur" }
        ],
        ownerRoom: [
          { required: true, message: "请输入房间号", trigger: "blur" }
        ],
        manageCarId: [],
        waterFId: [
          { required: true, message: "请输入水费单号", trigger: "blur" }
        ],
        eleFId: [
          { required: true, message: "请输入电费单号", trigger: "blur" }
        ],
        gasFId: [
          { required: true, message: "请输入燃气费单号", trigger: "blur" }
        ],
        propFId: [
          { required: true, message: "请输入物业费单号", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.owner.ownerId = this.$route.query.id;
    this.axios
      .post(
        "owner/detailowner?ownerId=" + this.owner.ownerId
      )
      .then(res => {
        this.owner = res.data;
        console.log(res);
      })
      .catch(err => {
        console.error(err);
      });
  },
  methods: {
    toaddparking(managecarId){
      this.$router.push({
        path:'/index_manager/ownerparking',
        query:{
          Id:managecarId,
        }
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.owner); //访客数据
          this.axios
            .post("owner/updateowner", this.owner)
            .then(res => {
              if (res.data == "success") {
                this.$alert("修改成功！", {
                  confirmButtonText: "确定",
                  callback: action => {
                    this.$router.push("/index_manager/ownerhead");
                  }
                });
              } else {
                this.$alert("修改失败！", {
                  confirmButtonText: "确定"
                });
              }
              console.log(res);
            })
            .catch(err => {
              console.error(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    turnback() {
      this.$router.push("ownerhead/showowner");
    }
  },
  components: {}
};
</script>

<style scoped>
.dd {
  float: left;
}

.aa {
  width: 74%;
  position: relative;
  right: -23px;
  /* border: solid 1px #000000; */
}

.limitdiv {
  width: 500;
  margin: 0 auto;
  width: 50%;
}
.el-row {
  margin-bottom: 20px;
}

.el-col {
  border-radius: 4px;
}

.bg-purple {
  background: #ffffff;
}
.grid-content {
  border-radius: 4px; /**角度圆滑*/
  min-height: 36px; /**高度 */
  text-align: center; /**居中显示 */
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
